<style lang="less">
    .teacher-edit {
        & .head-img {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 0;
            top: 0;
            z-index: 10;
        }
    }
</style>
<template>
    <div>
        <ZkModalVue class="teacher-edit" :title="title" :size="'lg'" :visible="visible" @cancel="handleCancel" @ok="handleOk">
            <a-form-model ref="form" :model="info" v-bind="formLayout" :rules="rules">
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="教师账号" prop="account">
                            <a-input v-model="info.account" :maxLength="20" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :span="8" :offset="1">
                        <div class="head-img">
                            <ImgUpload :src="info.headUrl" @ok="imgUploadOk"></ImgUpload>
                        </div>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="教师姓名" prop="name">
                            <a-input v-model="info.name" :maxLength="20" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="手机号码" prop="phone">
                            <a-input-number v-model="info.phone" style="width:100%" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="教师状态" prop="status">
                            <ZkSelect v-model="info.status" :options="getStatusOpts"></ZkSelect>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row v-if="id">
                    <a-col :span="12">
                        <a-form-model-item label="注册时间" prop="createdTime">
                            <div>{{info.createdTimeStr}}</div>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="24">
                        <a-form-model-item label="教师简介" prop="introduction" :labelCol="formLayout1.labelCol" :wrapperCol="formLayout1.wrapperCol">
                            <a-textarea v-model="info.introduction" :autoSize="{ minRows: 4, maxRows: 10 }" :maxLength="500" />
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row>
                    <a-col :span="12">
                        <a-form-model-item label="教师密码" :prop="!id?'password':''">
                            <a-input-password v-model="info.password" :maxLength="20"/>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <!-- <a-row>
                    <a-col :span="24">
                       <InputTable></InputTable>
                    </a-col>
                </a-row> -->
            </a-form-model>
        </ZkModalVue>
    </div>
</template>
<script>
    import { DescList, DescItem, STable } from '@/appBase';
    import ZkModalVue from '@/appBase/ZkModal.vue';
    import ZkSelect from '@/appBase/ZkSelect.vue';
    import ImgUpload from '@/modules/common/components/ImgUpload.vue';
    import { lenRule, notEmptyRule, phoneRule } from '@/appBase/formRules';
    import { queryEduTeacherDetail } from '@/api/demo';
    import { getStatusOpts } from '@/modules/common/service/base';
    import { BaseStatusEnum } from '@/modules/common/enum/enum';
    import { formatTimeStr } from '@/appBase/utils';
    // import InputTable from './components/InputTable.vue';
    
    export default {
        name: "TeacherEdit",
        components: {
            DescList,
            DescItem,
            STable,
            ZkModalVue,
            ZkSelect,
            ImgUpload,
            // InputTable
        },
        data() {
            return {
                title: '教师修改',
                pageLoading: false,
                visible: false,
                /** 布局配置 */
                formLayout: {
                    layout: 'horizontal',
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 8 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 15 }
                    }
                },
                formLayout1: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 4 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 18 }
                    }
                },
                id: null,
                info: {
                    account: "",
                    collegeCode: "0",
                    headUrl: "",
                    id: 0,
                    introduction: "",
                    majorCode: "",
                    name: "",
                    password: "",
                    phone: "",
                    sex: '',
                    status: BaseStatusEnum.ENABLE
                },
                rules: {
                    account: [notEmptyRule(), lenRule({ max: 20 })],
                    name: [notEmptyRule(), lenRule({ max: 20 })],
                    sex: [notEmptyRule()],
                    phone: [phoneRule()],
                    majorCode: [notEmptyRule()],
                    status: [notEmptyRule()],
                    introduction: [lenRule({ max: 500 })],
                    password: [notEmptyRule(),lenRule({ max: 20 })],
                }
            }
        },
        watch: {
            // 'info.img': function (newVal, oldVal) {
            //     if (newVal != oldVal) this.$refs.img.onFieldChange();
            // }
        },
        methods: {
            show(param) {
                this.id = param.id;
                this._onOk = param.onOk;
                this._onCancel = param.onCancel;
                this.visible = true;
                this.$nextTick(() => {
                    this.info.headUrl = '';
                    this.$refs.form.resetFields();
                    if (this.id) {
                        this.title = '教师修改';
                        queryEduTeacherDetail({ id: this.id }).then((result) => {
                            result.createdTimeStr = formatTimeStr(result.createdTime, 'YYYY-MM-DD HH:mm:ss');
                            result.password = null;
                            Object.assign(this.info, result);
                        });
                    } else {
                        this.title = '教师新增';
                    }
                })
            },
            handleOk() {
                this.$refs.form.validate(async (valid) => {
                    console.log(valid);
                    if (!valid) return;
                    const param = this.info;
                    if (this.id) {
                        await updateEduTeacher(param);
                    } else {
                        await addEduTeacher(param);
                    }
                    this.visible = false;
                    if (this._onOk) this._onOk();
                })
            },
            handleCancel() {
                this.visible = false;
                if (this._onCancel) this._onCancel();
            },
            /** 选择头像 */
            selecteHeadImg() {
                this.$refs.selectHeadImg.show({
                    onOk: (val) => {
                        this.info.img = val;
                    }
                })
            },
            imgUploadOk(val){
                this.info.headUrl = val.path;
                console.log('this.info.headUrl',this.info.headUrl);
            },
            getStatusOpts
        }
    }
</script>